import React, { useEffect, useState } from 'react';
import styles from './addtohomegifdialog.module.css';
import icon_type_home from '@/assets/icon_type_home.png'
import icon_type_android from '@/assets/icon_type_android.png'
import icon_type_ios from '@/assets/icon_type_ios.png'
import icon_close from '@/assets/icon_close.png'
import icon_chrome_menu from '@/assets/icon_chrome_menu.png'
import { Mask, Toast } from 'antd-mobile';
import AddHomeEvent from '@/utils/addHomeEvent';
import { LangVnd } from '@/utils/langVnd';


export default function AddToHomeDialog({ visible, onConfirm, onClose }) {

    const [needDisplay, setNeedDisplay] = useState(false);
    const [needDisplayGuideMask, setNeedDisplayGuideMask] = useState(false);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangVnd);

    //监听
    // useEffect(() => {
    //     setAddToHome(isHomeMode)
    //     setNeedDisplay(visible)
    // }, [])

    //监听
    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible]);

    // 触发添加到主屏幕操作
    const onHandleAddHomeClick = () => {
        let result = AddHomeEvent.onHandleAddHomeEventClick()
        if (!result) {
            // 展示全屏引导层
            setNeedDisplayGuideMask(true)
        }
    };

    // 下载android apk
    const onHandleInstallAndroidAppClick = () => {
        //打开新窗口
        window.open("https://www.cmcwallet.net/apk/vicmc_r45.apk", "_blank")
    };
    // 下载ios ipa
    const onHandleInstallIOSAppClick = () => {
        //打开新窗口
        window.open("https://gogo.dzptelaf.com/yx5s0o", "_blank")
    };

    return (
        <Mask visible={needDisplay} opacity={0.6}
            onMaskClick={() => { }}>
            <div className={styles.addGifDialogOverlayBg}>
                <div className={styles.addGifDialogOverlayContent}>

                    <div className={styles.addGifDialogOverlayContentRow} onClick={onHandleAddHomeClick}>
                        <img className={styles.addGifDialogOverlayContentRowIcon} alt='' src={icon_type_home} />
                        <div className={styles.addGifDialogOverlayContentRowTitle}>{curLang.addToHomeScreen}</div>
                    </div>

                    <div className={styles.addGifDialogOverlayContentRow} onClick={onHandleInstallAndroidAppClick}>
                        <img className={styles.addGifDialogOverlayContentRowIcon} alt='' src={icon_type_android} />
                        <div className={styles.addGifDialogOverlayContentRowTitle}>{curLang.installAndroidApp}</div>
                    </div>

                    <div className={styles.addGifDialogOverlayContentRow} onClick={onHandleInstallIOSAppClick}>
                        <img className={styles.addGifDialogOverlayContentRowIcon} alt='' src={icon_type_ios} />
                        <div className={styles.addGifDialogOverlayContentRowTitle}>{curLang.installIOSApp}</div>
                    </div>

                    <img className={styles.addGifDialogOverlayContentCloseIcon} alt='' src={icon_close} onClick={() => { onClose && onClose() }} />
                </div>
            </div>

            <Mask visible={needDisplayGuideMask} opacity={0.9} color='#56BCF9F0'
                onMaskClick={() => { }}>
                <div className={styles.addGifDialogOverlayGuideBg}>
                    <div className={styles.addGifDialogOverlayGuideTitle}>Thêm lối tắt Ví CMC</div>

                    <div className={styles.addGifDialogOverlayGuildRow}>
                        <div className={styles.addGifDialogOverlayGuildRowTitle}>Nhấp vào     sau đó chọn 'Thêm vào màn hình chính' từ menu trình duyệt để thêm lối tắt Ví CMC để truy cập dễ dàng.</div>
                        <img className={styles.addGifDialogOverlayGuildRowIcon} alt='' src={icon_chrome_menu} />
                    </div>

                    <div className={styles.addGifDialogOverlayGuideConfirm} onClick={() => { setNeedDisplayGuideMask(false) }}>Đã hiểu!</div>
                </div>
            </Mask>
        </Mask>
    );
};
